<template>
  <div class="classify">
    <!-- 搜索商品 -->
    <div class="search">
      <div class="searchContainer" @click="handler">
        <van-icon name="search" class="icon" /><span
          >搜索商品，共114694款好物</span
        >
      </div>
    </div>
    <!-- 搜索框 -->
    <!-- <van-search   v-model="value" placeholder="搜索商品，共114694款好物" input-alig="center" readonly  input-align="center"/> -->

    <!-- 分类 -->
    <div class="cateContainer">
      <!-- 左侧 -->
      <van-sticky class="cateLeft">
        <van-sidebar v-model="activeKey" class="sidebar">
          <van-sidebar-item
            :title="list.name"
            v-for="(list, index) in categoryL1List"
            :key="index"
            @click="handlerList(categoryL1List, index)"
          />
        </van-sidebar>
      </van-sticky>
      <!-- 右侧推荐 -->
      <div class="cateRight" v-if="this.activeKey == 0">
        <div class="contentList">
          <van-swipe
            class="my-swipe"
            indicator-color="white"
            loop
            :autoplay="3000"
          >
            <van-swipe-item
              v-for="banner in currentCategory.bannerList"
              :key="banner.id"
            >
              <!-- <img :src="banner.picUrl" alt="" /> -->
              <van-image
                width="100%"
                height="100%"
                lazy-load
                :src="banner.picUrl"
              />
            </van-swipe-item>
          </van-swipe>

          <div class="cateItem">
            <div
              class="contentItem"
              v-for="(imglist, index) in categoryL2List"
              :key="index"
            >
              <a @click="handlerPath(imglist)">
                <!-- <img :src="imglist.bannerUrl" alt="" /> -->
                <van-image
                  width="64px"
                  height="72px"
                  lazy-load
                  :src="imglist.bannerUrl"
                />
                <span>{{ imglist.name }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧分类 -->
      <div class="cateRight" v-else>
        <div class="contentList">
          <div class="img">
            <!-- <img
              :src="
                currentCategory.bannerUrl
                  ? currentCategory.bannerUrl
                  : '	https://yanxuan.nosdn.127.net/761877bc4e2cf50d7c424a8a7e6378bf.jpg'
              "
              alt=""
            /> -->

            <van-image
              width="100%"
              height="100%"
              lazy-load
              :src="currentCategory.bannerUrl"
            />
          </div>
          <div
            class="cateList"
            v-for="(item, index) in categoryGroupList"
            :key="item.id"
          >
            <div class="hd">{{ item.name }}</div>
            <div class="cateItem">
              <div
                class="contentItem"
                v-for="(itemlist, index) in categoryGroupList[index]
                  .categoryList"
                :key="itemlist.id"
              >
                <a @click="handlerPaths(itemlist)">
                  <!-- <img :src="itemlist.wapBannerUrl" alt="" /> -->
                  <van-image
                    width="64px"
                    height="72px"
                    lazy-load
                    :src="itemlist.wapBannerUrl"
                  />
                  <span>{{ itemlist.name }}</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Classify",
  data() {
    return {
      activeKey: 0, //侧边栏index
      categoryId: "11", //左侧id值
    };
  },
  computed: {
    //左侧列表
    ...mapGetters([
      "categoryL1List",
      "categoryL2List",
      "currentCategory",
      "categoryGroupList",
    ]),
  },
  mounted() {
    //获取分类页面的数据
    this.getCateList();
  },
  // 监听
  watch: {
    $route(route) {
      let categoryid = route.query.categoryid;

      this.getCateList(categoryid);
    },
  },
  methods: {
    //点击跳转到搜索界面
    handler() {
      this.$router.push("/search?redirect=classify");
    },

    //获取分类页面的数据
    getCateList(cateId) {
      this.$store.dispatch("getCateList", cateId);
    },

    // 点击根据索引获取id值
    handlerList(list, index) {
      let cateId = list[index].id;
      this.categoryId = cateId;

      this.$router.push({
        path: "/classify",
        query: {
          categoryid: cateId,
        },
      });
    },

    // 点击跳转路由
    handlerPath(imglist) {
      // console.log(imglist.id,imglist.superCategoryId)

      this.$router.push({
        path: "/item/list",
        query: {
          categoryId: imglist.superCategoryId,
          subCategoryId: imglist.id,
          categoryType: 0,
        },
      });
    },

    handlerPaths(itemlist) {
      // console.log(itemlist.id,itemlist.superCategoryId)
      this.$router.push({
        path: "/item/list",
        query: {
          categoryId: itemlist.superCategoryId,
          subCategoryId: itemlist.id,
          categoryType: 0,
        },
      });
    },
  },
};
</script>

<style lang="less">
// 搜索
.search {
  width: 375;
  font-size: 14px;
}
.searchContainer {
  width: 345px;
  height: 28px;
  background: #ededed;
  text-align: center;
  border-radius: 5px;
  line-height: 28px;
  color: #666;
  margin: 8px auto;
}
.searchContainer .icon {
  font-size: 16px;
  padding: 2px;
}

// 分类
.cateContainer {
  height: 556px;
  display: flex;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

// 左侧
.cateLeft {
  width: 22%;
  display: flex;
  border-right: 1px solid #eee;
}
.van-sidebar-item {
  background: #fff;
  padding-bottom: 5px;
}

.van-sidebar-item--select::before {
  width: 3px;
  height: 25px;
  margin-top: 5px;
}
.van-sidebar-item__text {
  white-space: nowrap;
}
.van-sidebar-item--select {
  color: #ab2b2b;
}

// 右侧推荐
.cateRight {
  width: 100%;
  overflow-y: scroll;
}
.contentList {
  padding: 15px 15px 20px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
// 轮播图
.my-swipe .van-swipe-item {
  width: 260px;
  height: 96px;
}

.van-swipe__indicator {
  width: 21px;
  height: 1.5px;
}

.contentList img {
  width: 100%;
  height: 100%;
}
// 小图片
.contentList .cateItem {
  display: flex;
  flex-wrap: wrap;
}
.contentItem {
  width: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  margin-right: 10px;
}
.contentItem img {
  height: 72px;
}
.contentItem span {
  display: block;
  font-size: 12px;
  text-align: center;
  color: black;
}

// 右侧分类
.contentList .img {
  width: 260px;
  height: 96px;
  margin-bottom: 15px;
}
.cateList {
  width: 100%;
  margin-bottom: 10px;
}
.cateList .hd {
  font-size: 14px;
  font-weight: bold;
  line-height: 26px;
  border-bottom: 1px solid #eee;
}
.cateList .cateItem {
  display: flex;
  flex-wrap: wrap;
}
// .contentItem {
//   width: 33.33%;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   margin-top: 20px;
// }
.cateItem .contentItem img {
  width: 90%;
  height: 72px;
}
// .contentItem  span {
//   font-size: 12px;
//   text-align: center;
// }
</style>